<template>
  <div
    class="rank"
    @mousewheel="doSomething"
  >
    <!-- <h1>rank</h1> -->
    <BorderTitle>云音乐特色榜</BorderTitle>

    <!-- <router-link to="RankList"><RankItem :obj="soarBang.playlist" ></RankItem></router-link> 
    <RankItem :obj="newsongBang.playlist"></RankItem>
    <RankItem :obj="originalBang.playlist"></RankItem>
    <RankItem :obj="hotSongBang.playlist"></RankItem> -->
    <router-link
      v-for="item in one"
      :key="item.id"
      :to="`rankList/${item.id}`"
      tag="span"
    >
      <RankItem :obj="item"></RankItem>
    </router-link>

    <BorderTitle>全球媒体榜</BorderTitle>

    <router-link
      v-for="item in two"
      :key="item.id"
      :to="`rankList/${item.id}`"
      tag="span"
    >
      <RankItem :obj="item">

      </RankItem>
    </router-link>

    <div
      v-show="alldata.length"
      class="la"
    >下滑加载更多
      <img
        src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3275824058,2562348537&fm=26&gp=0.jpg"
        alt=""
      >
    </div>
    <!-- <RankItem :obj="blackGumBang.playlist"></RankItem>
    <RankItem :obj="cloudMusicBang.playlist"></RankItem> -->

  </div>
</template>
<script>
import BorderTitle from "@/components/BorderTitle";

import RankItem from "@/components/RankItem";

export default {
  name: "Rank",
  data() {
    return {
      // soarBang: {},
      // newsongBang: {},
      // originalBang: {},
      // hotSongBang: {},
      // blackGumBang: {},
      // cloudMusicBang: {},

      one: [],
      two: [],

      clientHeight: 0, //可视区的高度
      scrollTop: 0, //滚动条滚动时，距离顶部的距离
      scrollHeight: 0, //滚动条的总高度,
      alldata: [],
      // addIndex:1
    };
  },
  components: {
    RankItem,
    BorderTitle,
  },
  created() {
    // this.axios.get("/playlist/detail?id=19723756").then((d) => {
    //     this.soarBang = d.data;
    //   });

    // window.addEventListener("scroll", this.doSomething);

    this.axios.get("/toplist/detail").then((d) => {
      this.alldata = d.data.list;
      this.one = d.data.list.splice(0, 4);
      this.two = d.data.list.splice(4, 1);
    });
  },
  methods: {
    doSomething() {
      this.scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; //可视区的高度
      this.clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight; //滚动条滚动时，距离顶部的距离
      this.scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight; //滚动条的总高度
      // console.log(this.scrollTop,this.clientHeight,this.scrollHeight)
      if (this.scrollTop + this.clientHeight >= this.scrollHeight - 10) {
        // if(this.addIndex<this.alldata.length){

        // console.log(this.alldata)
        // console.log(this.two)

        // console.log(this.alldata.slice(3,4+this.addIndex))
        // console.log(this.alldata)
        // let a=this.alldata.splice(0,1)[0]
        // console.log(this.alldata.splice(0,1))
        if (this.alldata.length != 0) {
          this.two.push(this.alldata.splice(0, 1)[0]);
        }
        // this.two.concat(this.alldata.splice(0,1))
        // }
      }
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.doSomething);
  },
};
</script>
<style lang="less" scoped>
.rank {
  background-color: #f9fafb;
  .la {
    text-align: center;
    img {
      left: 50%;
      // margin-top: 10px;
      width: 40px;
      height: 30px;
     margin-left: 50%;
      animation: next 1s 0s  linear infinite alternate;
    }
  }
  @keyframes next {
    from{
      transform:translate(-50%,0px)
    }
    to{
transform:translate(-50%,10px)
    }
  }
}
</style>